<template>
    <div v-if="visible">
        <el-drawer title="分配班级" :append-to-body="true" :before-close="handleClose" :size="600" :visible.sync="visible"
            direction="rtl" custom-class="drawer" destroy-on-close ref="drawer">
            <div class="drawer__content" v-loading="loading">
                <el-row>

                    <el-form :model="formSearch" :rules="rules" ref="form">
                        <el-form-item>
                            <el-input placeholder="请输入班级名称" clearable="" v-model="formSearch.class_name"
                                class="input-with-select">
                                <el-button @click="search" slot="append" icon="el-icon-search"></el-button>
                            </el-input>
                        </el-form-item>
                    </el-form>

                    <el-form :model="formShow" :rules="rules" ref="form">
                        <el-form-item prop="nickname" label="学员姓名" size="mini">
                            {{ formShow.nickname }}
                        </el-form-item>
                        <el-form-item prop="class_id" label="当前班级" size="mini">
                            <div v-if="formShow.class_name">
                                <span>
                                    {{ formShow.class_name }}</span>
                                <span @click="cancelClass">
                                    <i class="el-icon-close"></i>
                                </span>

                            </div>

                        </el-form-item>
                    </el-form>
                </el-row>

                <el-row>
                    <el-radio-group v-model="radioSelection">
                    <el-table :data="tableData" tooltip-effect="dark" row-key="id"
                        style="width: 100%">
                        <el-table-column prop="id" label="选择" width="55">
                            <template slot-scope="scope">
                                <el-radio :label="scope.row.id">&nbsp;</el-radio>
                            </template>
                        </el-table-column>
                        <el-table-column prop="class_name" label="班级名称" show-overflow-tooltip width="200">
                        </el-table-column>
                        <el-table-column prop="create_user_name" label="老师账号" width="200">
                        </el-table-column>
                        <el-table-column prop="student_num" label="学员数" width="120">
                        </el-table-column>
                    </el-table>
                    </el-radio-group>
                    <div class="block">

                        <el-pagination @current-change="handleCurrentChange" :current-page="pageInfo.pageNumber"
                            :page-size="pageInfo.pageSize" background layout="total, prev, pager, next"
                            :total="pageInfo.total">
                        </el-pagination>
                    </div>
                </el-row>

                <div class="drawer__footer">
                    <el-button @click="cancelForm" size="mini">取 消</el-button>
                    <el-button type="primary" size="mini" @click="handleSubmit">确 定</el-button>
                </div>
            </div>

        </el-drawer>
    </div>
</template>
<script>
import { list } from '@/api/kanke/gradeclass/gradeclass'
import { getStudentDetail, assignStudent } from '@/api/kanke/student'

export default {
    name: 'KanKeAssignClass',
    props: {
        visible: {
            type: Boolean,
        },
        handleReload: {
            type: Function
        },
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            loading: false,
            form: {
                class_id: '',
            },
            rules: {

            },
            formLabelWidth: '100px',
            dialog: true,
            tableData: [],
            formSearch: {},
            formShow: {
                id: 0,
                class_name: '',
                class_id: '',
            },
            pageInfo: {
                pageNumber: 1,
                pageSize: 10,
                total: 0
            },
            class_list: [],
            // 选中的班级
            multipleSelection: [],
            radioSelection:0
        }
    },

    watch: {
        detail: {
            handler(newVal) {
                console.log(newVal)
                if (newVal.user_id) {
                    const { id = 0, nickname = '', class_id = 0, class_name = '' } = newVal
                    this.formShow = {
                        id,
                        nickname,
                        class_id,
                        class_name
                    }
                    this.radioSelection=class_id;
                    this.init()
                }
            },
            immediate: true
        }
    },
    methods: {
        init() {
            this.fetchList()
        },
        fetchList() {
            this.loading = true
            list({ ...this.formSearch, ...this.pageInfo }).then(res => {
                if (res.code == 200) {
                    this.tableData = res.data.list
                    this.pageInfo.total = res.data.total
                }
                this.loading = false
            })
        },
        fetchDetail() {
            getStudentDetail({ user_id: this.detail.user_id }).then(res => {
                if (res.code == 200) {
                    const { id = 0, nickname = '', class_id = 0, class_name = '' } = res.data
                    this.formShow = {
                        id,
                        nickname,
                        class_id,
                        class_name
                    }
                    this.radioSelection=class_id;
                }
            })
        },
        handleClose(done) {
            this.$emit('update:visible', false);
        },
        handleSelectionChange(val) {
            if (val.length > 1) {
                this.$message.error('最多只能选择一个班级')
            }
            this.multipleSelection = val
        },
        cancelForm() {
            this.$emit('update:visible', false);
        },
        handleSubmit() {
            // if (this.multipleSelection.length == 0) {
            //     this.$message.error('请选择班级')
            //     return
            // }
            // if (this.multipleSelection.length > 1) {
            //     this.$message.error('最多只能选择一个班级')
            //     return
            // }
            if(this.radioSelection==0){
                this.$message.error('请选择班级')
                return
            }
            const params = {
                id: this.formShow.id,
                // class_id: this.multipleSelection[0].id
                class_id: this.radioSelection
            }
            assignStudent(params).then(res => {
                if (res.code == 200) {
                    this.$emit('update:visible', false);
                    this.$message.success(res.msg)
                    this.$emit('handleReload')
                }
            })
        },
        search() {
            this.pageInfo.pageNumber = 1
            this.fetchList()
        },
        handleCurrentChange(e) {
            this.pageInfo.pageNumber = e;
            this.fetchList();
        },
        cancelClass() {
            const params = {
                id: this.formShow.id,
                class_id: 0
            }
            // 清除选中的班级
            assignStudent(params).then(res => {
                if (res.code == 200) {
                    this.$message.success(res.msg)
                    this.fetchDetail()
                    this.$emit('handleReload');
                }
            })
        },

    },
}
</script>
<style lang="scss" scoped>
.drawer {
    &__content {
        padding: 20px;
        margin-bottom: 30px;

        ::v-deep .el-select .el-input {
            width: 200px;
        }

        ::v-deep .el-icon-close {
            padding-left: 10px;
        }

        .block {
            margin-top: 20px;
        }
    }

    &__footer {
        margin-top: 20px;
        margin-left: 200px;
    }
}
</style>